<template>
    <div class="page-index">
        <!--<van-nav-bar-->
        <!--title="标题"-->
        <!--left-text="返回"-->
        <!--right-text="按钮"-->
        <!--left-arrow-->
        <!--@click-left="onClickLeft"-->
        <!--@click-right="onClickRight"-->
        <!--/>-->
        <van-nav-bar
            v-if="enterUrl"
            title=""
            left-arrow
            @click-left="jumpToUrl"
        />
        <div class="van-hairline--bottom van-nav-bar">
            <div class="van-nav-bar__left"><span class="title-txt">Tolymoly</span></div>
            <div class="van-nav-bar__right">
                <i class="van-icon van-icon-search" @click="$router.push('/search/search')"></i>
                <img :src="langImage" class="laguage-icon" @click="toChangeLang"/>
            </div>
        </div>
        <!--<van-nav-bar left-arrow>-->
        <!--&lt;!&ndash;<van-icon name="wap-nav" slot="left" @click.native="setUserInfoPop"/>&ndash;&gt;-->
        <!--<span class="title-txt" slot="left">Tolymoly</span>-->
        <!--&lt;!&ndash;<van-icon name="search" slot="right" />&ndash;&gt;-->
        <!--&lt;!&ndash;<van-icon name="like-o" slot="right" @click="isLogin ? $router.push('/user/favourites') : $router.push('/login-register/loginregister')"/>&ndash;&gt;-->
        <!--&lt;!&ndash;<van-icon name="chat" slot="right" @click="showInboxAcvitiy()"/>&ndash;&gt;-->
        <!--</van-nav-bar>-->
        <van-swipe :loop="false">
            <van-swipe-item class="banners">
                <span class="banner-txt">{{$t('m.Anyonecanbuyandsell')}}</span>
                <img src="../static/img/images/index-banners-1.png" class="swiper-banner"/>
            </van-swipe-item>
            <van-swipe-item class="banners">
                <span class="banner2-txt">{{$t('m.ComparePhones')}}</span>
                <img src="../static/img/images/index-banners-2.jpg" class="swiper-banner"/>
            </van-swipe-item>
        </van-swipe>
        <div class="index-category">
            <div class="loading" v-show="categoryLoading1">
                <div class="loading-inside">
                    <van-loading type="spinner" />
                </div>
            </div>
            <van-cell-group class="category-title">
                <van-cell :title="$t('m.Categories')" is-link to="/buy-list" :value="$t('m.Seeall')" />
            </van-cell-group>
            <div class="main-tabbar index-category-box">
                <div class="index-category-scroll">
                    <div class="index-category-list" v-for="(item, index) in categoryJson" :key="index" @click="goToList(item)">
                        <div class="category-item-icon">
                            <div class="icon-box">
                                <i class="icon" :class="'icon-icon_' + item.id"></i>
                            </div>
                        </div>
                        <div class="tab-item-label">{{item.name}}</div>
                    </div>
                </div>
            </div>
        </div>

        <!--<p class="index-title">{{$t('m.Sellingisfasteasy')}}</p>-->
        <!--<div class="main-tabbar">-->
        <!--<div class="tab-item">-->
        <!--<div class="tab-item-icon">-->
        <!--<div class="icon-box">-->
        <!--<img slot="icon" src="../static/img/images/camera1.png">-->
        <!--</div>-->
        <!--</div>-->
        <!--&lt;!&ndash;<div class="tab-item-label">{{$t('m.Properties')}}</div>&ndash;&gt;-->
        <!--<div class="tab-item-label">{{$t('m.Snappicturesofnew')}}</div>-->
        <!--</div>-->
        <!--<div class="tab-item">-->
        <!--<div class="tab-item-icon">-->
        <!--<div class="icon-box">-->
        <!--<img slot="icon" src="../static/img/images/message1.png">-->
        <!--</div>-->
        <!--</div>-->
        <!--<div class="tab-item-label">{{$t('m.Chatwithbuyer')}}</div>-->
        <!--</div>-->
        <!--<div class="tab-item">-->
        <!--<div class="tab-item-icon">-->
        <!--<div class="icon-box">-->
        <!--<img slot="icon" src="../static/img/images/dollar1.png">-->
        <!--</div>-->
        <!--</div>-->
        <!--<div class="tab-item-label">{{$t('m.Meetandgetpaid')}}</div>-->
        <!--</div>-->
        <!--</div>-->
        <!--<van-row class="index-tabs-box">-->
        <!--<van-col span="12">-->
        <!--&lt;!&ndash;$store.state.store.isLogin ? $router.push('/category') : $router.push('/login-register/loginregister')&ndash;&gt;-->
        <!--<div class="index-tabs-btn left" @click="$router.push('/category')">-->
        <!--&lt;!&ndash;<img src="../static/img/images/money.png" class="tabs-btn-icon"/>&ndash;&gt;-->
        <!--{{$t('m.Sell')}}-->
        <!--</div>-->
        <!--</van-col>-->
        <!--<van-col span="12">-->
        <!--<div class="index-tabs-btn right" @click="$router.push('/buy-list')">-->
        <!--&lt;!&ndash;<img src="../static/img/images/search_wirte.png" class="tabs-btn-icon"/>&ndash;&gt;-->
        <!--{{$t('m.Find')}}-->
        <!--</div>-->
        <!--</van-col>-->
        <!--</van-row>-->
        <van-cell-group class="category-title">
            <van-cell :title="$t('m.ComparePhones')" />
        </van-cell-group>

        <div class="compare-phone">
            <div class="compare-item" @click="$router.push('/compare-phone/compare-price')">
                <img src="../static/img/images/phonePrice.png" style="width:30px;height:30px;margin:0 10px">
                <span>{{$t('m.Price')}}</span>
            </div>
            <div class="compare-item" @click="$router.push('/compare-phone/compare-phone')">
                <img src="../static/img/images/phoneSpec.png" style="width:30px;height:30px;margin:0 10px">
                <span>{{$t('m.Specification')}}</span>
            </div>
        </div>
        <div class="explore-title">{{$t('m.Explore')}}</div>
        <van-list
            v-model="loading"
            :finished="finished"
            loading-text=" "
            @load="getList"
            class="main-explore">
            <div class="explore-item" @click="goToDetail(item.id)" v-for="(item, index) in tableData" :key="index"  v-bind:class="[tableData.length % 2 == 0 ? twoClass : oneClass]">
                <!--<div class="explore-item-icon">-->
                <!--&lt;!&ndash;<img :src="item.image"  v-lazy="item.image">&ndash;&gt;-->
                <!--<img v-lazy="item.cover"  :style="defaultImage" alt="" />-->
                <!--</div>-->
                <div class="explore-item-icon">
                    <!--<img :src="item.cover" :style="defaultImage" alt=""/>-->
                    <img v-lazy="getSmallImageUrl(item.cover)" :key="item.cover" alt="" :onload="getWidthAndHeight(item, index)" :class="[item.wth == 1 ? 'width-max' : 'height-max']"/>
                </div>
                <div class="explore-item-label">{{translateString(item.title)}}</div>
                <span>
                <div class="explore-item-label price" v-if="item.priceType == 2">Lks&nbsp;{{regexNum(item.price)}}</div>
                <div class="explore-item-label price" v-else>Ks&nbsp;{{regexNum(item.price)}}</div>
                </span>
                <!--<div class="explore-item-label dates">{{getDateDiff(item.createDatetime)}}</div>-->
            </div>
        </van-list>
        <div class="view-all-btn">
            <van-button size="large" class="btn" @click="$router.push('/buy-list')">{{$t('m.Viewall')}}</van-button>
        </div>
        <div style="padding:40px;"></div>
        <footer-bar ref="footer" footerBar="index"></footer-bar>
        <!--用户信息表单&#45;&#45;登陆注册入口-->
        <!--<van-popup v-model="userInfoPop" position="left" overlay-class="pop-class">
            <div class="user-info-box">
                <span class="user-info" @click="$router.push('/user/profile')" v-if="isLogin">
                    <i class="i-icon1">
                        <img :src="photo" :onerror="defaultHeadImg"/>
                    </i>
                    <p class="title">{{userName}}</p>
                </span>
                <span class="user-info" @click="$router.push('/login-register/loginregister')" v-else>
                    <i class="i-icon1">
                        <img src="" :onerror="defaultHeadImg"/>
                    </i>
                    <p class="title">{{$t('m.Login')}}/{{$t('m.Register')}}</p>
                </span>
            </div>
            <van-cell-group :border="false">
                <van-cell value="My ads"  @click="isLogin ? $router.push('/user/myitems') : $router.push('/login-register/loginregister')" />
            </van-cell-group>
            <van-cell-group :border="false">
                <van-cell value="Favourites"  @click="isLogin ? $router.push('/user/favourites') : $router.push('/login-register/loginregister')" />
            </van-cell-group>
            <van-cell-group :border="false">
                <van-cell value="Feedback" @click="isLogin ? $router.push('/feedback/feedback') : $router.push('/login-register/loginregister')"/>
            </van-cell-group>
            <van-cell title="Language">
                <img slot="right-icon" :src="langImage" class="laguage-icon" @click="changeLang"/>
            </van-cell>
        </van-popup>-->
        <span class="myUniTest" id="myWidth2" style="opacity: 0">ကက</span>
        <span class="myUniTest" id="myWidth1" style="opacity: 0">က္က</span>
    </div>
</template>

<script>
    import {getUserInfo, searchIndexList, getFirstCategoryData} from '../static/api/mgc_api'
    import Qs from 'qs'
    import FooterBar from '@/components/FooterBar'
    // 英文翻译
    import categoryJson from '../static/json/category'
    // 缅文
    import mm_categoryJson from '../static/mmJson/category'
    // 缅文Unicode
    import mmu_categoryJson from '../static/mmUnicodeJson/category'
    export default {
        name: 'index',
        metaInfo: {
            title: 'Tolymoly',
            titleTemplate: '%s',
            meta: [
                {name: 'keywords', content: 'shop sell'},
                {name: 'description', content: 'Tolymoly'}
            ]
        },
        components: {
            FooterBar
        },
        data() {
            return {
                // activeNames: ['1'],
                defaultHeadImg: 'this.src="' + require('../static/img/images/user-head.png') + '"',
                defaultImage: {
                    backgroundImage: "url(" + require("../static/img/images/default-list.png") + ")",
                    backgroundRepeat: "no-repeat",
                    backgroundSize: "100% 100%",
                },
                langImage: '../static/img/images/usLang.png',
                oneClass: 'one',
                twoClass: 'two',
                isLogin: false,
                userInfoPop: false,
                loading: false,
                finished: false,
                tableData: [],
                pageData: {
                    pageNum: 1,
                    pageSize: 10,
                },
                pageInfo: {
                    totalCount: 0,
                    totalPages: 0
                },
                userName: '',
                userId: '',
                photo:'',
                allowBack: false,
                categoryJson: [],
                categoryLoading1: false,
                enterUrl: ''
            };
        },
        computed: {
            categoryJsons() {
                if (this.$store.state.store.localLang == 'MM') {
                    return mm_categoryJson
                } else if (this.$store.state.store.localLang == 'MMU') {
                    return mmu_categoryJson
                } else {
                    return categoryJson
                }
            },
        },
        methods: {
            jumpToUrl(){
                console.log(this.enterUrl, '---上一次的路由')
                location.href = this.enterUrl;
                localStorage.removeItem('enterUrlProperty')
                localStorage.removeItem('enterUrlHappyGoGo')
                // if(this.enterUrl == 'http://movie.dlintech.com/'){
                //     location.href = 'http://movie.dlintech.com'
                // }else if(this.enterUrl == 'https://www.happygogo.com.mm/'){
                //     location.href = 'https://www.happygogo.com.mm'
                // }
            },
            setUserInfoPop () {
                this.userInfoPop = true;
            },
            goBack(){
                if (this.userInfoPop) {
                    this.userInfoPop = false
                }
                // this.$router.replace({path: '/'});
                //replace替换原路由，作用是避免回退死循环
                history.pushState(null, null, document.URL);
            },
            getLang () {
                if(this.$store.state.store.localLang == 'US') {
                    this.langImage = '../static/img/images/usLang.png'
                } else {
                    this.langImage = '../static/img/images/myanmar.png'
                }
            },
            toChangeLang() {
                this.$router.push('/language')
            },
            translateString(str){
                if (!str) return ''
                return this.$translateLang(str, 'unicodeTozawgyi');
            },
            regexNum (v,len,split) {
                split = split || ',', len = Math.abs((+len) % 20 || 2)
                v = parseFloat((v + '').replace(/[^\d\.-]/g, '')).toFixed(len) + ''
                v = parseFloat(v) + ''
                return v.replace(/\d+/, function (v) {
                        var lit = v.length % 3 == 0
                        var index = lit ? v.length - 3 : -1
                        return v.split('').reverse().join('').replace(/\d{3}/g, function (k, l) {
                            return k + ((l == index && lit) ? '' : split)
                        }).split('').reverse().join('')
                    }
                )
            },
            getDateDiff (dateTimeStamp) {
                if (!dateTimeStamp) return
                let minute = 1000 * 60
                let hour = minute * 60
                let day = hour * 24
                let month = day * 30
                let year = day * 365
                let now = new Date().getTime()
                let diffValue = now - dateTimeStamp
                if (diffValue < 0) return
                let monthC =diffValue/month
                let yearC =diffValue/year
                let weekC =diffValue/(7*day)
                let dayC =diffValue/day
                let hourC =diffValue/hour
                let minC =diffValue/minute
                let result = ''
                if(yearC>=1){
                    if (parseInt(yearC)>1) {
                        result="" + parseInt(yearC) + " years ago"
                    } else {
                        result="" + parseInt(yearC) + " year ago"
                    }
                } else if(monthC>=1) {
                    if (parseInt(monthC)>1) {
                        result="" + parseInt(monthC) + " months ago"
                    } else {
                        result="" + parseInt(monthC) + " month ago"
                    }
                } else if(weekC>=1) {
                    if (parseInt(weekC)>1) {
                        result="" + parseInt(weekC) + " weeks ago"
                    } else {
                        result="" + parseInt(weekC) + " week ago"
                    }
                } else if(dayC>=1) {
                    if (parseInt(dayC)>1) {
                        result="" + parseInt(dayC) + " days ago"
                    } else {
                        result="" + parseInt(dayC) + " day ago"
                    }
                } else if(hourC>=1) {
                    if (parseInt(hourC)>1) {
                        result="" + parseInt(hourC) + " hours ago"
                    } else {
                        result="" + parseInt(hourC) + " hour ago"
                    }
                } else if(minC>=1) {
                    if (parseInt(minC)>1) {
                        result="" + parseInt(minC) + " minutes ago"
                    } else {
                        result="" + parseInt(minC) + " minute ago"
                    }
                }
                return result;
            },
            getWidthAndHeight (e, i) {
                let img = new Image();
                img.src = e.cover
                img.onload = () =>{
                    // let str = 'width: ' + img.width + ' ; ' + 'height: ' + img.height + ' ; ' + 'loaded'
                    // console.log(str, 'str')
                    if(img.width>0 || img.height>0){
                        let obj = {
                            wth : null
                        }
                        if (Number(img.width) > Number(img.height)){
                            obj.wth = 1
                        } else {
                            obj.wth = 0
                        }
                        Object.assign(this.tableData[i], obj)
                    }
                };

            },
            getList(pageNum) {
                // if (pageNum == 1) {
                //     this.pageData.pageNum = 1;
                // }

                // let searchForm = {};
                // searchForm.sort = 'create_datetime desc'
                // searchForm.pageNum = this.pageData.pageNum
                // searchForm.pageSize = this.pageData.pageSize
                // let params = Qs.stringify(searchForm, {arrayFormat: 'repeat'})
                searchIndexList().then((res) => {
                    if (res.data.errorID == 0) {
                        // this.tableData = res.data.object.list || []
                        // wth判断列表图片宽高 start
                        let dataList = res.data.object.list || []
                        for (let i=0; i < dataList.length; i++) {
                            let obj = {
                                wth : null
                            }
                            Object.assign(dataList[i], obj)
                        }
                        // wth判断列表图片宽高 start
                        // // // 刷新列表 or 加载更多
                        // if (pageNum == 1) {
                        //     window.scrollTo(0, 0)
                        //     // this.tableData = res.data.object.list || []
                        //     this.tableData = dataList
                        // } else {
                        //     // this.tableData = this.tableData.concat(res.data.object.list)
                        //     this.tableData = this.tableData.concat(dataList)
                        // }
                        // // // 分页信息配置
                        // this.pageInfo.totalPages = res.data.object.pages
                        // this.pageInfo.totalCount = res.data.object.total
                        // this.pageData.pageNum = this.pageData.pageNum + 1
                        // if (this.pageData.pageNum > this.pageInfo.totalPages) {
                        //     this.finished = true
                        // }
                        // // 要求共显示十行：每行两个，总共20个，每次请求十个，最多两次结束请求
                        // if (this.pageData.pageNum > 2) {
                        //     this.finished = true
                        // }
                        this.tableData = dataList
                        this.finished = true

                        this.loading = false
                    } else {
                        this.$toast(res.data.message)
                        this.finished = true
                        this.loading = false
                    }

                }).catch((e) => {
                    console.log(e)
                    this.$toast('error, please try again later~')
                    this.finished = true
                    this.loading = false
                })
            },
            goToDetail(id) {
                this.$router.push({
                    path:'/buydetail',
                    query:{
                        id: id
                    }
                })
            },
            translateCategoryJson(obj) {
                if (obj && obj.length > 0) {
                    // 第一层
                    for (let i = 0; i < obj.length; i++) {
                        for (let j = 0; j < this.categoryJsons.length; j++) {
                            if (obj[i].id == this.categoryJsons[j].id) {
                                obj[i].name = this.categoryJsons[j].name
                            }
                        }
                    }
                }
                return obj
            },
            getCategoryJson(){
                this.categoryLoading1 = true;
                let obj = ''
                getFirstCategoryData().then((res) => {
                    let data = res.data;
                    // 下拉菜单数据装载
                    if (data) {
                        if (data.errorID === 0) {
                            // let allItem = {
                            //     "id": 379,
                            //     "name": "Everything else",
                            //     "children": [],
                            //     "addAll": 1
                            // }
                            let property = {
                                "id": 371,
                                "name": "Property",
                                "children": []
                            }
                            obj = JSON.parse(data.object)
                            if(this.$store.state.store.localLang == 'MM'){
                                // allItem.name = 'အျခား'
                                property.name = 'အိမ္ျခံေျမ'
                                this.translateCategoryJson(obj)

                            } else if (this.$store.state.store.localLang == 'MMU'){
                                // allItem.name = 'အျခား'
                                property.name = 'အိမ်ခြံမြေ'
                                this.translateCategoryJson(obj)
                            }
                            obj.push(property);
                            // obj.push(allItem);
                            this.categoryJson = obj;

                        } else {
                            this.$toast(data.message)
                        }
                        this.categoryLoading1 = false;
                    }

                }).catch((e) => {
                    console.log(e)
                    this.$toast('error,please try again leter')
                    this.categoryLoading1 = false;
                })
            },
            goToList(item){
                if (item.id == 0) { // all category
                    this.$router.push('/buy-list')
                } else if (item.id == 371) { // property
                    location.href = 'https://bestproperty.com.mm/webPhone/index.html';
                } else {
                    this.$router.push({
                        path:'/buy-list',
                        query:{
                            categoryId: item.id,
                            category: item.name
                        }
                    })
                }
            },
            getSmallImageUrl(url) {
                let imageStr = url || ''
                let strIndex = imageStr.indexOf('.jpg')
                if ( strIndex!= -1){
                    imageStr = imageStr.slice(0,strIndex) + 'small.jpg'
                }
                return imageStr
            }
        },
        mounted() {
            // if (window.history && window.history.pushState) {
            //     // console.log(document.referrer,'http://localhost:8080/#/')
            //     history.pushState(null, null, document.URL);
            //     window.addEventListener('popstate', this.goBack(history), false);
            // }
            this.getLang()

            if(!(this.$store.state.store.localLang == 'US')){

                this.$store.commit('store/updateLang', 'MM')
                localStorage.setItem('lang', 'MM')
                this.$i18n.locale = 'MM'

                // if(myUnicode.check()){
                //     // uincode
                //     this.$store.commit('store/updateLang', 'MMU')
                //     localStorage.setItem('lang', 'MMU')
                //     this.$i18n.locale = 'MMU'
                // }else {
                //     // zawgyi
                //     this.$store.commit('store/updateLang', 'MM')
                //     localStorage.setItem('lang', 'MM')
                //     this.$i18n.locale = 'MM'
                // }
            }
            this.getCategoryJson()

            this.enterUrl = window.$enterUrl || '';
            // console.log('获取到的上个页面的host')
        },
        destroyed(){
            // window.removeEventListener('popstate', this.goBack, false);
        },
        beforeRouteLeave(to, from, next) {
                if(to.path == '/category'){  // 如果点击sell的话  将sell页面路由元状态改为需要刷新
                    this.$router.options.routes[9].meta.needFresh = true;
                }
                next(true)
        }
    };
</script>
<style>
    .page-index .van-nav-bar{
        /*background-color: #FF9900;*/
        background-color: #FFF;
    }
    .page-index .van-nav-bar .van-icon{
        /*color: #fff;*/
        color: #686868;
        margin-right: 10px;
        font-size: 18px;
    }
    .page-index .van-nav-bar .van-icon:last-child{
        margin-right: 4px;
    }
    .page-index .van-popup--left{
        height: 100%;
        width: 80%;
    }
    .page-index  .van-list__loading{
        width: 100%;
        /*border-top: 1px solid #F2F2F2;*/
    }
    .category-title .van-cell__title{
        color: #797979;
        font-weight: 700;
        font-size: 16px;
    }
    .category-title.van-hairline--top-bottom:after{
        border-bottom-width: 0px;
    }
    .index-category .van-loading{
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -15px;
        margin-left: -15px;
    }
    .page-index .bottom-btn-common{
        z-index: 99;
    }
</style>
<style scoped>
    @import '../static/img/sprites/sprite.css';
    .swiper-banner {
        width: 100%;
        /*height: 172px;*/
    }
    .banners{
        position: relative;
    }
    .banner-txt {
        position: absolute;
        top: 30px;
        left: 20px;
        width: 40%;
        font-size: 24px;
        white-space: pre-line;
    }
    .banner2-txt{
        display: block;
        font-size: 20px;
        line-height: 30px;
        text-align: center;
    }
    .main-tabbar, .main-explore{
        position: relative;
        background: #fff;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        text-align:center;
        flex-wrap: wrap;
        margin-top: 8px;
        padding: 0 5px;
    }
    .main-tabbar .tab-item{
        display: block;
        padding: 7px 0;
        /*width: 25%;*/
        width: 33.3%;
        text-decoration: none;
        color: #000;
    }
    .main-tabbar .tab-item-icon{
        /*width: 42px;*/
        /*height: 42px;*/
        width: 55px;
        height: 55px;
        margin: 0 auto 8px;
        /*border: 1px solid #FF9900;*/
        border-radius: 50%;
        /*padding: 4px;*/
    }
    .main-tabbar .tab-item-icon .icon-box{
        display: table-cell;
        vertical-align: middle;
        /*width: 44px;*/
        /*height: 44px;*/
        width: 100%;
        height: 100%;
    }
    .bottom-btn-items  .icon-box img{
        width: 29px;
        height: 29px;
    }
    .main-tabbar .tab-item-icon > *{
        display: block;
        margin: 0 auto;
        /*width: 100%;*/
        /*height: 100%;*/
    }
    .main-tabbar .tab-item-label{
        color: rgb(102, 102, 102);
        font-size: 14px;
        line-height: 20px;
        word-wrap:break-word;
        margin: 0 11%;
    }
    .index-title{
        color: rgb(81, 81, 81);
        font-size: 20px;
        font-weight: 400;
        text-align: center;
    }
    .index-tabs-box {
        /*margin:10px 4%;*/
        padding:26px 4% 12px;
    }
    .index-tabs-box .index-tabs-btn {
        position: relative;
        /*padding: 16px 0;*/
        padding: 10px 0;
        color:#fff;
        text-align: center;
        border-radius: 6px;
    }
    .index-tabs-box .index-tabs-btn.left{
        margin-right: 4%;
        /*background: #FF9A03;*/
        background: #5562EF;
        border:1px solid transparent;
    }
    .index-tabs-box .index-tabs-btn.right{
        margin-left: 4%;
        /*background: #03CD35;*/
        border:1px solid #5562EF;
        color: #5562EF;
    }
    .tabs-btn-icon{
        position: absolute;
        top: 50%;
        left: 16px;
        margin-top: -12px;
        width: 24px;
        height: 24px;
    }
    .compare-phone{
        display:flex;
        padding:0px 10px 5px 5px;
        border-bottom:solid 1px rgb(229, 229, 229);
    }
    .compare-phone .compare-item {
        display:flex;
        flex:1;
        border:solid 1px #a7a7a7;
        align-items:center;
        color: #666;
        font-size: 14px;
        line-height: 22px;
        word-wrap: break-word;
        margin: 0 10px 10px 10px;
        border-radius:5px;
        padding:5px;
    }

    .compare-phone-title{
        padding:10px 15px;
        white-space: nowrap;
        font-size: 16px;
        font-weight: 700;
        color: #797979;
    }
    .explore-title {
        margin: 18px 4% 0;
        color: rgb(121, 121, 121);
        font-weight: 700;
        line-height: 150%;
    }
    .main-explore {
        padding: 0;
        margin:0;
        margin-bottom: 14px;
        padding-right: 4%;
    }
    .main-explore .explore-item{
        display: block;
        padding: 14px 0 0;
        margin-left: 4%;
        width: 46%;
        text-decoration: none;
        color: #000;
        /*margin-right: 8%;*/
        /*border-bottom: 1px solid #F2F2F2;*/
    }
    .main-explore .explore-item.one:nth-last-child(2), .main-explore .explore-item.two:nth-last-child(2){
        border-bottom: none;
    }
    .main-explore .explore-item.two:nth-last-child(3){
        border-bottom: none;
    }
    .main-explore .explore-item:nth-child(2n){
        margin-right: 0;
    }

    .main-explore .explore-item .explore-item-icon{
        width: 100%;
        /*height: 135px;*/
        /*margin: 0 auto 5px;*/
        /*border: 1px solid #eee;*/
        align-items: center;
        display: flex;
        background: #f0f0f0;
        position: relative;
        z-index: 0;
        height: 0;
        padding: 0 0 100%;
        overflow: hidden;
        border-radius: 6px;
    }
    .main-explore .explore-item .explore-item-icon::before{
        content: "Tolymoly";
        position: absolute;
        top: 50%;
        bottom: 0;
        right: 0;
        left: 0;
        text-align: center;
        background: #f0f0f0;
        font-size: 1.5rem;
        font-weight: 700;
        color: #c0bfbf;
        /*line-height: 135px;*/
        z-index: -1;
        margin-top: -12px;
    }
    .main-explore .explore-item > *{
        display: block;
        margin: 0 auto;
    }
    .main-explore .explore-item-icon img {
        /*max-width:100%;*/
        /*max-height:100%;*/
        /*display: block;*/
        /*margin: 0 auto;*/
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        width: 100%;
    }
    .main-explore .explore-item-icon img.width-max{
        width: auto;
        left: 50%;
        right: auto;
        height: 100%;
        transform: translate(-50%);
    }
    .main-explore .explore-item-icon img.height-max{
        top: 50%;
        transform: translateY(-50%);
    }
    .main-explore .explore-item .explore-item-label{
        /*color: inherit;*/
        font-size: 14px;
        line-height: 160%;
        margin-top: 4px;
        text-align: left;
        overflow: hidden;
        white-space: nowrap;
        text-overflow:ellipsis;

        /*font-size: 12px;*/
        /*font-family: Bitter,sans-serif;*/
        color: #000;
    }
    .main-explore .explore-item .explore-item-label.price{
        /*color: #DB3743;*/
        /*font-size: 16px;*/
        /*font-weight: 600;*/
        font-size: 14px;
        color: #4c4c4c;
    }
    .main-explore .explore-item .explore-item-label.dates{
        color: #A1A1A1;
    }
    .view-all-btn {
        padding: 14px 4%;
        /*border-top: 1px solid #F2F2F2;*/
    }
    .view-all-btn .btn {
        border:1px solid #FF9A03;
        color: #FF9A03;
    }
    .page-index .van-nav-bar span.title-txt{
        /*color:#fff;*/
        color: rgb(255, 153, 0);
        font-weight: bold;
        font-size: 16px;
        vertical-align: middle;
    }
    .user-info-box {
        padding: 15px 0 15px 15px;
        /*border-bottom: 1px solid #F2F2F2;*/
        border-bottom: 1px solid #ff9a03;

    }
    .user-info {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding-left: 4.1em;
        min-height: 50px;
        line-height: 150%;
        justify-content: space-around;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .user-info i{
        position: absolute;
        top: 50%;
        left: 0;
        display: inline-block;
        width: 50px;
        height: 50px;
        margin-top: -25px;
    }
    .user-info p.title{
        font-size: 14px;
        font-weight: 400;
        font-style: normal;
        text-decoration: none;
        padding: 0;
        margin: 0;
        text-align: left;
    }
    .user-info i img{
        width: 100%;
        display: block;
    }
    .laguage-icon{
        width: 23px;
        height: 15px;
        /*margin-top: 17px;*/
        vertical-align: middle;
    }
    .index-category{
        position: relative;
    }
    .index-category .loading{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9;
        background: rgba(255,255,255,.5);
    }
    .index-category .loading .loading-inside{
        position: relative;
        width: 100%;
        height: 100%;
    }
    .main-tabbar.index-category-box{
        padding: 0 4%;
        height: 266px;
        display: block;
        border-bottom: 1px solid #e5e5e5;
    }
    .index-category-scroll{
        height: 100%;
        display: flex;
        overflow-x: scroll;
        flex-flow: column wrap;
    }
    .index-category-list{
        width: 80px;
        height: 133px;
        /*margin-right: 8px;*/
    }
    .index-category-list .icon-box{
        display: inline-block;
        vertical-align: middle;
        width: 100%;
        height: 100%;
    }
    .category-item-icon {
        width: 55px;
        height: 55px;
        margin: 0 auto 8px;
        border-radius: 50%;
        border: 1px solid #FF9532;
        padding: 8px;
        box-sizing: border-box;
    }
    .category-item-icon .icon{
        display: inline-block;
    }
    .index-category-list .tab-item-label{
        color: rgb(102, 102, 102);
        font-size: 14px;
        line-height: 22px;
        word-wrap:break-word;
        margin: 0;
        display: -webkit-box;
        /*! autoprefixer: off */
        -webkit-box-orient: vertical;
        /* autoprefixer: on */
        overflow: hidden;
        -webkit-line-clamp: 3;
        width: 80px;
    }
    @media (max-width:375px) and (min-width:321px) {
        .swiper-banner {
            /*height: 192px;*/
        }
        .main-explore .explore-item .explore-item-icon{
            /*height: 155px;*/
        }
        .main-explore .explore-item .explore-item-icon::before{
            /*line-height: 155px;*/
        }
    }
    @media (max-width:1080px) and (min-width:376px) {
        .swiper-banner {
            /*height: 214px;*/
        }
        .main-explore .explore-item .explore-item-icon{
            /*height: 173px;*/
        }
        .main-explore .explore-item .explore-item-icon::before{
            /*line-height: 173px;*/
        }
    }
</style>
